<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header_txt">
      <view class="back"
            @click="goback">
        <image src="/static/img/back3.png"></image>
      </view>
      <view class="title"> 发布话题 </view>
    </view>

    <view class="issue">
      <view class='teatareabox'>
        <textarea class="issuebox"
                  v-model="content"
                  maxlength="140"
                  placeholder="请输入话题内容"
                  @input="textChange"
                  placeholder-class="input_class" />
        <view class='calcnumber'> {{textNum}}/ 140字</view>
        <view class='manyimgbox'>
          <view class="imgboxhere">
            <block v-if="imgList.length>0">
              <view class='multiimgbox'
                    v-for="(el,index) in imgList"
                    :key="index">
                <image src='/static/image/fbht_ico_gb@2x.png'
                       @click="delImg(index)"
                       class='closepng'></image>
                <image :src='$serverIp+el'
                       class='multiimg'></image>
              </view>
            </block>
            <view @click="uploadFiles"
                  v-show="imgList.length<=4"
                  class='multiimgbox'>
              <image src='/static/image/fbbg_img_sctp@2x.png'
                     class='multiimg'></image>
            </view>
          </view>
        </view>
      </view>
      <view class='entrue'
            @click="save">确认</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: [],
      textNum: 0,
      content: ''
    }
  },
  methods: {
    chooseImg() {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: 5, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], //从相册选择
          success: function (res) {
            resolve(res.tempFiles)
            // this.uploadsImg(res.tempFiles[0])
          }
        })
      })
    },
    async uploadFiles() {
      let arr = await this.chooseImg()

      for (let index = 0; index < arr.length; index++) {
        if (this.imgList.length < 5) {
          await this.uploadsImg(arr[index])
        }
      }
    },

    async uploadsImg(path) {
      uni.uploadFile({
        url: 'http://127.0.0.1/shuati1/public/index.php/api/common/upload',
        file: path,
        name: 'file',
        formData: {
          token: uni.getStorageSync('token')
        },
        success: (uploadFileRes) => {
          this.imgList.push(JSON.parse(uploadFileRes.data).data.url)
        }
      })
    },
    delImg(i) {
      this.imgList.splice(i, 1)
    },
    textChange(e) {
      this.textNum = e.detail.cursor
    },
    async save() {
      let { data } = await this.$http.post('/talk/save', { info: this.content, images: this.imgList.toString() })
      uni.showToast({ title: data.msg, icon: 'none' })
      if (data.code == 1) {
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
      }
    }
    // goback() {
    //   uni.navigateBack({
    //     delta: 1
    //   })
    // }
  }
}
</script>

<style lang="scss">
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .right {
    position: absolute;
    top: 14rpx;
    right: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.issue {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx 0;
  box-sizing: border-box;
}
.teatareabox {
  height: auto;
  width: 100%;
  background-color: #ffffff;
  padding: 0 20rpx;
  margin-bottom: 100rpx;
  box-sizing: border-box;
}
.issuebox {
  height: 400rpx;
  width: 100%;
  padding-top: 20rpx;
}
.calcnumber {
  height: 40rpx;
  line-height: 40rpx;
  text-align: end;
  color: #999999;
}

/* 上传多图 */
.manyimgbox {
  height: auto;
  width: 100%;
  /* border:1rpx solid blue; */
  padding: 15rpx 0;
}

/* 多图的盒子容器 */
.imgboxhere {
  /* border: 1rpx solid red; */
  display: flex;
  flex-wrap: wrap;
}

.multiimgbox {
  height: 162rpx;
  width: 162rpx;
  padding: 20rpx;
  /* border: 1rpx solid red; */
  position: relative;
}

.closepng {
  width: 26rpx;
  height: 26rpx;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.multiimg {
  width: 122rpx;
  height: 122rpx;
}

.entrue {
  width: 650rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;

  text-align: center;
  background: #ffdd47;
  border-radius: 10px;
}
.input_class {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
</style>